<template>
  <div class="common-layout">
      <el-container>
          <el-aside :style="'width:' + autowidth">
             <h1 style="color: white;">后台管理系统</h1>
            <Menu :collapse="collapsed"/>
          
          </el-aside>
          <el-container>
              <el-header>
                <!-- 引入icon图标 -->
                <el-icon style="font-size: 30px;" @click="() => {collapsed = !collapsed}">
                <component :is="collapsed ? Expand:Fold"> </component>
   </el-icon>
              </el-header>
              <el-main>
           <!-- 加入分页组件 -->
                <el-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    class="demo-tabs"
    @edit="handleTabsEdit"
  >
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
                
                  <router-view></router-view>
              </el-main>
              <el-footer>Footer</el-footer>
          </el-container>
      </el-container>
  </div>
</template>

<script setup lang="ts">

console.log(import.meta.env.MODE);
console.log(import.meta.env.BASE_URL);


import Menu from '@/components/Menu.vue'

//引入icon图标
import {
    Expand,
    Fold
  } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'

  // 定义菜单按钮收缩展开效果
const collapsed = ref<boolean>(false)


// 定义侧边栏宽度
const autowidth = computed(() => {
    if (collapsed.value) {
        return "50px"
    }else {
        return "200px"
    }
})

//顶部分页功能
let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}

</script>

<style scoped lang="less">
.common-layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.el-container {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  // text-align: center;
  line-height: 80px;
}

.el-aside {
  background-color: @menuBg;
  color: #333;
  text-align: center;
  /* line-height: 200px; */
  overflow: hidden;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
</style>